<template>
  <div>
    <!-- 1.0 四个卡片 -->
    <Card :list="cardList" />

    <!-- 2.0 折线图 -->
    <div class="box" ref="main" style="width: 700px;height:400px;"></div>
  </div>
</template>

<script>
import Card from './components/Card'
import * as echarts from 'echarts'
import { getInfo } from '@/api'
import { option } from './options.js'

export default {
  components: {
    Card
  },
  data() {
    return {
      cardList: [
        {
          id: 1,
          key: 'totalOrder',
          icon: 'icon-wenjian',
          name: '总订单',
          num: '202,466'
        },
        {
          id: 2,
          key: 'totalAmount',
          icon: 'icon-wenjian',
          name: '总销售额',
          num: '202,466'
        },
        {
          id: 3,
          key: 'todayOrder',
          icon: 'icon-wenjian',
          name: '今日订单',
          num: '202,466'
        },
        {
          id: 4,
          key: 'totayAmount',
          icon: 'icon-wenjian',
          name: '今日销售额',
          num: '202,466'
        }
      ]
    }
  },
  mounted() {
    this.getDatas()
    // this.initCharts()
  },
  methods: {
    async getDatas() {
      const data = await getInfo()
      console.log(data)
      // 根据上面卡片的数组进行遍历
      this.cardList.forEach(item => {
        item.num = data[item.key]
      })

      // 在这里处理
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.main)

      // 指定图表的配置项和数据
      // 把请求回来的数据对option进行改造就可以了
      option.xAxis[0].data = data.xData
      option.series[0].data = data.amountData
      option.series[1].data = data.orderData

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    initCharts() {}
  }
}
</script>

<style lang="less" scoped>
.box {
  margin: 40px;
}
</style>
